import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import '../static/less/home.less'
export default function Home() {
  let [account, setAccount] = useState("");
  let [pass, setPass] = useState("");
  let [isLogin, SetIsLogin] = useState(false);
  const isLoginFn = () => {
    let acc = localStorage.getItem("account");
    let pas = localStorage.getItem("pass");
    // console.log(acc,pas);
    if (acc == null || pas == null) {
      SetIsLogin(false);
    }
    else {
      SetIsLogin(true);
      setAccount(acc);
      setPass(pas)
    }
  }

  //初始化
  useEffect(() => {
    isLoginFn();
  }, [isLogin])

  return (
    <div className='home'>
      <div className='top'>
        <h2 className='top-title'>我的</h2>
      </div>
      {/* 未登录 */}
      <div className="bottom" style={{ display: isLogin == true ? 'none' : 'block' }}>
        <div className="bottom_top">
          <div className='img'></div>
          <Link to={`/login`}>
            <div className='goLogin'>前往登录<i className='tagLogin'></i></div>
          </Link>
        </div>
        <div className='bottom_middle'>
          <div className='middle_num'>
            <div className='num_box'>
              <span className='num_num'>0</span>
              <p className='num_text'>获赞</p>
            </div>
            <div className='num_box'>
              <span className='num_num'>0</span>
              <p className='num_text'>发帖</p>
            </div>
            <div className='num_box'>
              <span className='num_num'>0</span>
              <p className='num_text'>粉丝</p>
            </div>
          </div>
          <div className="middle_bottom">
            <button className='qiandao'>签到</button>
          </div>
        </div>
        <div className="bottom_bottom">
          <div className='box'><i className='icon icon1'></i>我的资料</div>
          <div className='box'><i className='icon icon2'></i>修改资料</div>
          <Link to={`/collect`}>
            <div className='box'>
              <i className='icon icon3'></i>我的书架
            </div>
          </Link>
          <div className='box'><i className='icon icon4'></i>关于星漫绘梦</div>
        </div>
      </div>
      {/* 登录成功 */}
      <div className="bottom" style={{ display: isLogin == true ? 'block' : 'none' }}>
        <div className="bottom_top_is">
          <div className="imgg"></div>
          <div className='account'>账号：{account}</div>
          <div className='tuichu' onClick={() => {
            SetIsLogin(false);
          }}>
            <Link className='Link' to={`/login`}>退出登录</Link>
          </div>
        </div>
        <div className='bottom_middle'>
          <div className='middle_num'>
            <div className='num_box'>
              <span className='num_num'>0</span>
              <p className='num_text'>获赞</p>
            </div>
            <div className='num_box'>
              <span className='num_num'>0</span>
              <p className='num_text'>发帖</p>
            </div>
            <div className='num_box'>
              <span className='num_num'>0</span>
              <p className='num_text'>粉丝</p>
            </div>
          </div>
          <div className="middle_bottom">
            <button className='qiandao'>签到</button>
          </div>
        </div>
        <div className="bottom_bottom">
          <Link to={`/profile`}>
            <div className='box'>
              <i className='icon icon1'></i>我的资料
            </div>
          </Link>
          <Link to={`/update`}>
            <div className='box'><i className='icon icon2'></i>修改资料</div> 
          </Link>
          <Link to={`/collect`}>
            <div className='box'>
              <i className='icon icon3'></i>我的书架
            </div>
          </Link>
          <Link to={`/setting`}>
            <div className='box'>
              <i className='icon icon4'></i>关于星漫绘梦
            </div> 
          </Link>
        </div>
      </div>
    </div>
  )
}


